<template>
	<view class="container" @click="onClickCard">
		<view class="title-container" :style="{backgroundColor: titleBgColor}">
			<van-row>
			  <van-col span="3">
				  <view class="icon-class">
				  	<van-icon size="25px" name="location" />
				  </view>
			  </van-col>
			  <van-col span="14"><view class="main-title van-ellipsis">{{item.arrivalAddress}}</view></van-col>
			  <van-col span="4"><text style="display: flex;justify-content: flex-end;">{{statusText}}</text></van-col>
			  <van-col span="3">
				  <view class="icon-class">
				  	<van-icon name="arrow" />
				  </view>
			  </van-col>
			</van-row>
		</view>
		
		<view class="content-container">
			<van-row custom-class="subtitle-content">
			  <van-col span="6"><text>发车日期</text></van-col>
			  <van-col span="6"><text>发车时间</text></van-col>
			  <van-col span="6"><text>人数</text></van-col>
			  <van-col span="6"><text>用车人</text></van-col>
			</van-row>
			
			<van-row custom-class="main-content">
			  <van-col span="6"><text>{{createdDate}}</text></van-col>
			  <van-col span="6"><text>{{createdTime}}</text></van-col>
			  <van-col span="6"><text>{{item.passengersNum}}</text></van-col>
			  <van-col span="6"><text>{{item.passengers[0].name}}</text></van-col>
			</van-row>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		props:{
			item:Object
		},
		data() {
			return {
				
			};
		},
		methods:{
			onClickCard(){
				this.$emit('click', this.item)
			}
		},
		computed:{
			titleBgColor(){
				if(this.item.status == 'created'){
					return 'rgba(42, 130, 228, 1)'
				}else if(this.item.status == 'allowed'){
					return 'rgba(168, 224, 103, 1)'
				}else if(this.item.status == 'dispatched'){
					return 'rgba(90, 200, 250, 1)'
				}else if(this.item.status == 'travelStarted'){
					return 'rgba(7, 118, 169, 1)'
				}else if(this.item.status == 'travelEnded'){
					return 'rgba(223, 133, 167, 1)'
				}else if(this.item.status == 'finished'){
					return 'rgba(253, 164, 112, 1)'
				}else if(this.item.status == 'cancled'){
					return 'rgba(128, 128, 128, 1)'
				}else if(this.item.status == 'refused'){
					return 'rgba(230, 84, 10, 1)'
				}else if(this.item.status == 'closed'){
					return 'rgba(38, 38, 38, 1.0)'
				}else if(this.item.status == 'adminComfirmed'){
					return 'rgba(85, 85, 127, 1.0)'
				}
			},
			statusText(){
				return utils.statusToText(this.item.status)
			},
			createdDate(){
				const temp = this.item.setoffTime.split(' ')[0]
				const index = temp.indexOf('-')
				return temp.substring(index + 1, temp.length)
			},
			createdTime(){
				return this.item.setoffTime.split(' ')[1]
			}
		}
	}
</script>

<style lang="scss">
.container{
	margin: 10px 15px;
	text{
		display: flex;
		justify-content: center;
	}
	.title-container{
		color: $uni-text-color-inverse;
		// background-color: #4CD964;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		height: 44px;
		line-height: 44px;
		.icon-class{
			height: 44px;
			line-height: 44px;
			display: flex;
			justify-content: center;
		}
		.main-title{
			overflow:hidden; 
			text-overflow:ellipsis; 
			white-space:nowrap;
			display: block;
		}
	}
	.content-container{
		background-color: #fff;
		padding: 10px 0;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		box-shadow: inset 0px -1px 0px 0px rgb(223, 223, 223) ;
		.subtitle-content{
			text{
				font-size: 13px;
				color: #808080;
			}
		}
		.main-content{
			height: 40px;
			line-height: 40px;
		}
	}
}

</style>
